import { useState } from 'react'
import './index.scss'
import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'

function Yslb() {
    const navigate = useNavigate()
    const [selectedDate] = useState('2020-01-27')
    const [selectedTab, setSelectedTab] = useState(1) // 默认选中"周一 今日"

    const handleTabClick = (tabId: number) => {
        if (tabId !== 0) { // 排除"全部日期"
            setSelectedTab(tabId)
        }
    }

    // 日期数据
    const dateTabs = [
        { id: 0, type: 'all', text: '全部日期' },
        { id: 1, weekday: '周一', date: '今日' },
        { id: 2, weekday: '周二', date: '29' },
        { id: 3, weekday: '周三', date: '30' },
        { id: 4, weekday: '周四', date: '31' },
        { id: 5, weekday: '周五', date: '1' }
    ]

    return (
        <div className='yslb'>
            <div className='yslb-top'>
                <span><LeftOutline className='yslb-top-left' onClick={() => navigate(-1)} /></span>
                <span className='yslb-top-title'>医生列表</span>
            </div>
            <div className='yslb-bg'>
                <div className='yslb-header'>
                    <div className='yslb-department-name'>门诊外一科</div>
                    <div className='yslb-date-selector' onClick={() => {
                        // 这里可以添加日期选择器的逻辑
                        console.log('选择日期')
                    }}>
                        <div className='yslb-calendar-icon'>
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="3" y="4" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="2" />
                                <line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" strokeWidth="2" />
                                <line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" strokeWidth="2" />
                                <line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" strokeWidth="2" />
                            </svg>
                        </div>
                        <div className='yslb-date-text'>{selectedDate}</div>
                    </div>
                </div>
            </div>
            <div className='yslb-list'>
                <div className='yslb-date-tabs'>
                    {dateTabs.map((tab) => (
                        <div
                            key={tab.id}
                            className={`yslb-date-tab ${tab.type || ''} ${selectedTab === tab.id ? 'selected' : tab.id > 0 ? 'unselected' : ''}`}
                            onClick={() => handleTabClick(tab.id)}
                        >
                            {tab.type === 'all' ? (
                                <>
                                    <div>全部</div>
                                    <div>日期</div>
                                </>
                            ) : (
                                <>
                                    <div className='weekday'>{tab.weekday}</div>
                                    <div className='date'>{tab.date}</div>
                                </>
                            )}
                        </div>
                    ))}
                </div>

                {/* 医生列表 */}
                {selectedTab === 1 && (
                    <div className='yslb-doctor-list'>
                        <div className='yslb-doctor-item'>
                            <div className='yslb-doctor-avatar'>
                                <div className='yslb-avatar-placeholder'>刘</div>
                            </div>
                            <div className='yslb-doctor-info'>
                                <div className='yslb-doctor-name'>刘医生</div>
                                <div className='yslb-doctor-title'>主任医师</div>
                                <div className='yslb-doctor-department'>门诊外一科</div>
                                <div className='yslb-doctor-specialty'>擅长:肛肠外科(肛肠良性疾病),结直肠微创手术...</div>
                            </div>
                            <div className='yslb-doctor-availability available' onClick={()=>navigate('/yspb')}>20号</div>
                        </div>

                        <div className='yslb-doctor-item'>
                            <div className='yslb-doctor-avatar'>
                                <div className='yslb-avatar-placeholder'>杨</div>
                            </div>
                            <div className='yslb-doctor-info'>
                                <div className='yslb-doctor-name'>杨医生</div>
                                <div className='yslb-doctor-title'>副主任医师</div>
                                <div className='yslb-doctor-department'>门诊外一科</div>
                                <div className='yslb-doctor-specialty'>擅长:肛肠外科(肛肠良性疾病),结直肠微创手术...</div>
                            </div>
                            <div className='yslb-doctor-availability available' onClick={()=>navigate('/yspb')}>20号</div>
                        </div>

                        <div className='yslb-doctor-item'>
                            <div className='yslb-doctor-avatar'>
                                <div className='yslb-avatar-placeholder'>刘</div>
                            </div>
                            <div className='yslb-doctor-info'>
                                <div className='yslb-doctor-name'>刘医生</div>
                                <div className='yslb-doctor-title'>副主任医师</div>
                                <div className='yslb-doctor-department'>门诊外一科</div>
                                <div className='yslb-doctor-specialty'>擅长:肛肠外科(肛肠良性疾病),结直肠微创手术...</div>
                            </div>
                            <div className='yslb-doctor-availability available' onClick={()=>navigate('/yspb')}>20号</div>
                        </div>

                        <div className='yslb-doctor-item'>
                            <div className='yslb-doctor-avatar'>
                                <div className='yslb-avatar-placeholder'>章</div>
                            </div>
                            <div className='yslb-doctor-info'>
                                <div className='yslb-doctor-name'>章医生</div>
                                <div className='yslb-doctor-title'>主任医师</div>
                                <div className='yslb-doctor-department'>门诊外一科</div>
                                <div className='yslb-doctor-specialty'>擅长:肛肠外科(肛肠良性疾病),结直肠微创手术...</div>
                            </div>
                            <div className='yslb-doctor-availability unavailable'>已约满</div>
                        </div>
                    </div>
                )}

                {/* 周二医生列表 */}
                {selectedTab === 2 && (
                    <div className='yslb-doctor-list'>
                        <div className='yslb-doctor-item'>
                            <div className='yslb-doctor-avatar'>
                                <div className='yslb-avatar-placeholder'>刘</div>
                            </div>
                            <div className='yslb-doctor-info'>
                                <div className='yslb-doctor-name'>刘医生</div>
                                <div className='yslb-doctor-title'>主任医师</div>
                                <div className='yslb-doctor-department'>门诊外一科</div>
                                <div className='yslb-doctor-specialty'>擅长:肛肠外科(肛肠良性疾病),结直肠微创手术...</div>
                            </div>
                            <div className='yslb-doctor-availability available'>20号</div>
                        </div>

                        <div className='yslb-doctor-item'>
                            <div className='yslb-doctor-avatar'>
                                <div className='yslb-avatar-placeholder'>杨</div>
                            </div>
                            <div className='yslb-doctor-info'>
                                <div className='yslb-doctor-name'>杨医生</div>
                                <div className='yslb-doctor-title'>副主任医师</div>
                                <div className='yslb-doctor-department'>门诊外一科</div>
                                <div className='yslb-doctor-specialty'>擅长:肛肠外科(肛肠良性疾病),结直肠微创手术...</div>
                            </div>
                            <div className='yslb-doctor-availability available'>20号</div>
                        </div>
                    </div>
                )}

                {/* 周三医生列表 */}
                {selectedTab === 3 && (
                    <div className='yslb-doctor-list'>
                        <div className='yslb-doctor-item'>
                            <div className='yslb-doctor-avatar'>
                                <div className='yslb-avatar-placeholder'>刘</div>
                            </div>
                            <div className='yslb-doctor-info'>
                                <div className='yslb-doctor-name'>刘医生</div>
                                <div className='yslb-doctor-title'>主任医师</div>
                                <div className='yslb-doctor-department'>门诊外一科</div>
                                <div className='yslb-doctor-specialty'>擅长:肛肠外科(肛肠良性疾病),结直肠微创手术...</div>
                            </div>
                            <div className='yslb-doctor-availability available'>20号</div>
                        </div>

                        <div className='yslb-doctor-item'>
                            <div className='yslb-doctor-avatar'>
                                <div className='yslb-avatar-placeholder'>章</div>
                            </div>
                            <div className='yslb-doctor-info'>
                                <div className='yslb-doctor-name'>章医生</div>
                                <div className='yslb-doctor-title'>主任医师</div>
                                <div className='yslb-doctor-department'>门诊外一科</div>
                                <div className='yslb-doctor-specialty'>擅长:肛肠外科(肛肠良性疾病),结直肠微创手术...</div>
                            </div>
                            <div className='yslb-doctor-availability unavailable'>已约满</div>
                        </div>
                    </div>
                )}

                {/* 周四暂无信息 */}
                {selectedTab === 4 && (
                    <div className='yslb-empty-state'>
                        <div className='yslb-empty-icon'>
                            <div className='yslb-folder-icon'>
                                <div className='yslb-folder-body'></div>
                                <div className='yslb-folder-tab'></div>
                                <div className='yslb-documents'>
                                    <div className='yslb-doc-1'></div>
                                    <div className='yslb-doc-2'></div>
                                </div>
                                <div className='yslb-sparkles'>
                                    <div className='yslb-sparkle'></div>
                                    <div className='yslb-sparkle'></div>
                                    <div className='yslb-sparkle'></div>
                                </div>
                            </div>
                            <div className='yslb-decorations'>
                                <div className='yslb-leaf-left'></div>
                                <div className='yslb-leaf-right'></div>
                                <div className='yslb-cloud'></div>
                            </div>
                        </div>
                        <div className='yslb-empty-text'>暂无信息</div>
                    </div>
                )}

                {/* 周五暂无信息 */}
                {selectedTab === 5 && (
                    <div className='yslb-empty-state'>
                        <div className='yslb-empty-icon'>
                            <div className='yslb-folder-icon'>
                                <div className='yslb-folder-body'></div>
                                <div className='yslb-folder-tab'></div>
                                <div className='yslb-documents'>
                                    <div className='yslb-doc-1'></div>
                                    <div className='yslb-doc-2'></div>
                                </div>
                                <div className='yslb-sparkles'>
                                    <div className='yslb-sparkle'></div>
                                    <div className='yslb-sparkle'></div>
                                    <div className='yslb-sparkle'></div>
                                </div>
                            </div>
                            <div className='yslb-decorations'>
                                <div className='yslb-leaf-left'></div>
                                <div className='yslb-leaf-right'></div>
                                <div className='yslb-cloud'></div>
                            </div>
                        </div>
                        <div className='yslb-empty-text'>暂无信息</div>
                    </div>
                )}
            </div>
        </div>
    )
}

export default Yslb